<script setup lang="ts">
import { OperationType } from '@/entity/OperationType';
import { Page } from '@/entity/Page';
import { SysOnlineUser } from '@/entity/SysOnlineUser';
import onlineUserService from '@/services/online-user.service';
import { AxiosError } from 'axios';
import { ElLoading, ElMessage, ElMessageBox, type ElPagination, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn, ElButton } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Search, Refresh, Plus, Edit, Delete, View, Upload, Download, Share, Close } from "@element-plus/icons-vue";
import { RefreshLeft } from "@element-plus/icons-vue";

const createDefaultSearchEntity = () => {
    const e = new SysOnlineUser();
    return e;
}

const router = useRouter();
const route = useRoute();
const list = ref(new Array<SysOnlineUser>());
const selections = ref<SysOnlineUser[]>([]);
const searchEntity = ref(createDefaultSearchEntity());
const tableLoading = ref(false);

const load = async (searchObj?: SysOnlineUser) => {
    try {
        tableLoading.value = true;
        const res = await onlineUserService.list(searchObj);
        list.value = res;
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        tableLoading.value = false;
    }
}

const search = () => {
    load(searchEntity.value);
};

const refresh = () => {
    load(searchEntity.value);
}

const clearSearch = () => {
    searchEntity.value = createDefaultSearchEntity();
    load(searchEntity.value);
};

const selectionChanged = (val: SysOnlineUser[]) => {
    selections.value = val;
}

const forceLogoutRow = async (row: SysOnlineUser) => {
    try {
        const flag = await ElMessageBox.confirm('确定要强制下线该用户吗');
        if (flag) {
            await onlineUserService.forceLogouut(row.token);
            ElMessage({ message: "强制下线成功", type: "success" });
            load();
        }
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {

    }
};

onMounted(async () => {
    await load();
});
</script>

<template>
    <ElForm size="small" inline>
        <ElFormItem label="用户名">
            <ElInput v-model="searchEntity.username"></ElInput>
        </ElFormItem>
        <ElFormItem label="昵称">
            <ElInput v-model="searchEntity.nickname"></ElInput>
        </ElFormItem>
        <ElFormItem label="邮箱">
            <ElInput v-model="searchEntity.email"></ElInput>
        </ElFormItem>
        <ElFormItem label="手机号">
            <ElInput v-model="searchEntity.phone"></ElInput>
        </ElFormItem>
        <ElFormItem>
            <ElButton type="primary" :icon="Search" @click="search()">搜索</ElButton>
            <ElButton :icon="Refresh" @click="clearSearch()">清空</ElButton>
        </ElFormItem>
    </ElForm>
    <div class="flex">
        <ElButton size="small" :plain="true" :icon="RefreshLeft" @click="refresh">刷新</ElButton>
    </div>
    <ElTable row-key="token" :data="list" @selection-change="selectionChanged($event)" v-loading="tableLoading">
        <ElTableColumn type="selection" width="55" />
        <ElTableColumn prop="username" label="用户名"></ElTableColumn>
        <ElTableColumn prop="nickname" label="昵称"></ElTableColumn>
        <ElTableColumn prop="email" label="邮箱"></ElTableColumn>
        <ElTableColumn prop="phone" label="手机号"></ElTableColumn>
        <ElTableColumn prop="ip" label="IP"></ElTableColumn>
        <ElTableColumn prop="loginTime" label="登录时间"></ElTableColumn>
        <ElTableColumn prop="operation" label="操作">
            <template #default="scope">
                <ElButton size="small" link type="primary" @click="forceLogoutRow(scope.row)">强制注销</ElButton>
            </template>
        </ElTableColumn>
    </ElTable>
</template>

<style scoped lang="scss"></style>